<template>
    <div class="rowWrapper" :title="title" @click="handleFullScreen" :style="`${rowH && `height: ${rowH}px; width:${rowW ? rowW + 'px' : '100%'}`}`" :data-hash="hashName">
        <slot></slot>
      </div>
    </template>
    <script>
    import emitter from '../../utils/emitter'
    import { createHash } from '../../utils/createHash'
    export default {
      name: 'v-row',
      mixins: [emitter],
      inject: ['root'],
      data() {
        return {
          chart: null,
          rowH: 0,
          rowW: 0,
          isFullScreen: false
        }
      },
      props: {
        height: {
          type: Number,
          default: 0
        },
        width: {
          type: Number,
          default: 0
        },
        tag: {
          typeof: String,
          default: ''
        },
        title: String
      },
      computed: {
        hashName() {
          const name = 'v-row' + '_' + createHash(4)
          return name
        },
      },
      watch: {
        root: {
            handler(n, o) {
                this.rowH = n[`${this.hashName}_height`]
                this.rowW = n[`${this.hashName}_width`]
                this.$emit('popRow', {'height': this.rowH, 'width': this.rowW})
            },
            deep: true
        }
    },
      mounted() {
        this.$nextTick(cb => {
          this.dispatch('v-fullscreen', 'handleModule', { name: this.hashName, height: this.height, width: this.width, tag: this.tag })
          this.rowH = this.root[`${this.hashName}_height`]
          this.rowW = this.root[`${this.hashName}_width`]
        })
      },
      methods: {
        handleFullScreen() {
          if (this.tag !== 'header') return
          this.isFullScreen = !this.isFullScreen
          this.dispatch('v-fullscreen', 'handleScreen', this.isFullScreen)
        }
      }
    }
    </script>
    <style scoped>
    .rowWrapper{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
    }
    </style>
    